<template>
  <!-- tab扩展属性表单  -->
  <div>
    <vxe-form :data="formData" :items="formItems" titleColon>
      <template #myregion="{ data }">
        <vxe-input v-model="data.region" placeholder="自定义插槽模板"></vxe-input>
      </template>
    </vxe-form>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { ref, reactive } from 'vue';
import { VXETable, VxeFormPropTypes, VxeFormEvents } from 'vxe-table';

// 全局变量定义区 ==========
interface FormDataVO {
  name: string;
  nickname: string;
  sex: string;
  role: string;
  age: number;
  val1: string[];
  val2: boolean;
  val3: string;
  flag: boolean;
  region: string;
}

const formData = reactive<FormDataVO>({
  name: '',
  nickname: '',
  sex: '0',
  role: '',
  age: 22,
  val1: [],
  val2: false,
  val3: '',
  flag: false,
  region: ''
});

const formItems = ref<VxeFormPropTypes.Items>([
  {
    title: '左侧',
    span: 12,
    children: [
      {
        field: 'name',
        title: '属性1',
        span: 24,
        itemRender: { name: '$input', props: { placeholder: '请输入属性1' } }
      },
      {
        field: 'sex',
        title: '属性2',
        span: 12,
        itemRender: {
          name: '$select',
          options: [
            { value: '0', label: '女' },
            { value: '1', label: '男' }
          ],
          props: { placeholder: '请选择属性2' }
        }
      },
      {
        field: 'role',
        title: '属性3',
        span: 12,
        itemRender: { name: '$input', props: { placeholder: '请输入属性3' } }
      },
      {
        field: 'age',
        title: '属性4',
        span: 24,
        itemRender: { name: '$input', props: { type: 'number', placeholder: '请输入属性4' } }
      },
      {
        field: 'val1',
        title: '属性5',
        span: 24,
        itemRender: {
          name: '$checkbox',
          options: [
            { label: '爬山', value: '11' },
            { label: '健身', value: '22' }
          ]
        }
      },
      { field: 'val2', title: '属性6', span: 24, itemRender: { name: '$checkbox' } },
      {
        field: 'val3',
        title: '属性7',
        span: 24,
        itemRender: {
          name: '$radio',
          options: [
            { label: '是', value: 'Y' },
            { label: '否', value: 'N' }
          ]
        }
      },
      {
        field: 'flag',
        title: '属性8',
        span: 24,
        itemRender: { name: '$switch', props: { openLabel: '是', closeLabel: '否' } }
      },
      { field: 'region', title: '属性9', span: 24, itemRender: {}, slots: { default: 'myregion' } }
    ]
  },
  {
    title: '右侧',
    span: 12,
    children: [
      {
        field: 'nickname',
        title: '属性0',
        span: 24,
        itemRender: { name: '$input', props: { placeholder: '请输入属性0' } }
      }
    ]
  },
  {
    align: 'center',
    span: 24,
    itemRender: {
      name: '$buttons',
      children: [
        // { props: { type: 'submit', content: '配置式表单', status: 'primary' } },
        // { props: { type: 'reset', content: '重置' } }
      ]
    }
  },
  {
    align: 'center',
    span: 24,
    children: [
      {
        field: 'remark',
        title: '备注',
        span: 24,
        itemRender: { name: '$textarea', props: { placeholder: '请输入备注' } }
      }
    ]
  }
]);

// 方法定义区 =============
const submitEvent: VxeFormEvents.Submit = () => {
  VXETable.modal.message({ content: '保存成功', status: 'success' });
};

const resetEvent: VxeFormEvents.Reset = () => {
  VXETable.modal.message({ content: '重置事件', status: 'info' });
};
</script>
